import React from 'react';
import { inject, observer } from 'mobx-react';

import E8ToolBar from './E8ToolBar';
import E8ToolBarMore from './E8ToolBarMore';
import E8Logout from './E8Logout';

@inject('portalThemeStore')
@observer
class E8HeaderRight extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { portalThemeStore } = this.props;
    const { pluginReload } = portalThemeStore;
    if (pluginReload) {
      portalThemeStore.getPlugins();
    }
  }

  componentDidUpdate() {
    const logo = $('.e8header-left').width();
    const rleft = $('.e8header-right-menu').width();
    const rright = $('.e8header-right-toolbar').width();
    const wid = logo + rleft + rright + 30;
    $('.e8theme-layout-container').css({ 'min-width': wid });
  }

  render() {
    const { portalThemeStore } = this.props;
    const { pluginIds = [], pluginInsertCount } = portalThemeStore;

    return (
      <div className="e8header-right-toolbar">
        {pluginIds.map((item, index) => (
          <div key={index} id={item} className="e8header-toolbar-plugin" />
        ))}
        {pluginInsertCount > 0 ? <div className="e8header-toolbar-splitter" /> : null}
        <E8ToolBar ecId={`${(this && this.props && this.props.ecId) || ''}_E8ToolBar@903owl`} />
        <E8ToolBarMore ecId={`${(this && this.props && this.props.ecId) || ''}_E8ToolBarMore@9qe28y`} />
        <E8Logout ecId={`${(this && this.props && this.props.ecId) || ''}_E8Logout@vxhg98`} />
      </div>
    );
  }
}

export default E8HeaderRight;
